<template>
  <el-form
    class="filterConfigBox"
    ref="form"
    :model="value"
    :rules="_config.rules"
    :label-width="_config.labelWidth"
    size="small"
    label-position="right"
    @submit.native.prevent
  >
    <filter-box @search="handleSearch(true)" @reset="onReset">
      <template v-for="(option, index) in options">
        <el-form-item
          v-if="!(option.showTag === 'showTag')"
          :label="option.label"
          :prop="option.prop"
          :label-width="option.labelWidth"
          :key="index"
          :clearable="option.clearable"
        >
          <ConfigItem
            :option="option"
            v-model="value[option.prop]"
            :disabled="disabled"
            :readonly="readonly || option.readonly"
          />
        </el-form-item>
      </template>
    </filter-box>
    <template v-slot:operation>
      <slot name="operation"></slot>
    </template>
  </el-form>
</template>
<script>
import ConfigItem from "../ConfigItem/index";
import _ from "lodash";

export default {
  components: {
    ConfigItem,
  },
  props: {
    config: {
      // 绑定值
      type: Object,
      default: () => ({}),
    },
    options: {
      // 表单项
      type: Array,
      default: () => [],
    },
    value: {
      // 绑定值
      type: Object,
      default: () => ({}),
    },
    readonly: Boolean,
    disabled: Boolean,
  },
  model: {
    prop: "value",
    event: "on-model-change",
  },
  name: "FilterConfigBox",
  data() {
    return {
      defaultConfig: {
        labelWidth: "75px",
      },
      defaultValues: {},
    };
  },
  created() {
    this.defaultValues = _.cloneDeep(this.value);
  },
  mounted() {},
  methods: {
    handleSearch() {
      this.$emit("on-model-change", this.value);
      this.$emit("search", this.value);
    },
    onReset() {
      this.$refs.form.resetFields();
      const newObj = _.cloneDeep(this.defaultValues);
      this.$emit("on-model-change", newObj);
      this.$emit("onReset", newObj);
    },
  },
  computed: {
    _config() {
      return {
        ...this.defaultConfig,
        ...this.config,
      };
    },
  },
  watch: {},
};
</script>
<style lang='scss' scoped>
.filterConfigBox {
  // border-radius: 5px;
  // overflow: hidden;
  margin-bottom: 16px;
  .flex-box {
    margin-bottom: 0;
  }
}
</style>
